<template>

	<!-- 服务器客户端数量 -->
	<!-- 服务器 -->

	<view class="system">
		<view class="system-left">
			<view class="system-left-top linear-background-light-blue">
				<text>接口请求次数</text>
				<text>{{Request.TotalNumber}}</text>
			</view>
			<view class="system-left-bottom linear-background-light-orange">
				<text>客户端数量</text>
				<text>0</text>
			</view>

		</view>
		<view class="system-right linear-background-light-orange">

			<view class="system-right-header ">
				<text>服务器监控</text>
			</view>

			<swiper class="swiper" :indicatorDots="System.Attr.indicatorDots" :autoplay="System.Attr.autoplay"
				:direction="System.Attr.direction" :displayMultipleItems="System.Attr.displayMultipleItems"
				:interval="System.Attr.interval" :loop="System.Attr.loop" :indicatorPosition="System.Attr.indicatorPosition"
				:easingFunction="System.Attr.easingFunction">
				<swiper-item>
					<view class="swiper-item uni-bg-red">A</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">B</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">C</view>
				</swiper-item>
			</swiper>
		</view>
	</view>



</template>

<script setup>
	const Props = defineProps(["Request","System"])
	import { onBeforeMount } from 'vue';
</script>

<style scoped lang="scss">
	$gap:25rpx;
	.system {
		width: 94%;
		margin: $gap 3%;
		box-sizing: border-box;
		padding: 0rpx 0rpx;
		height: 400rpx;
		display: flex;
		gap: $gap;
	}

	.system-left-top,
	.system-left-bottom {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 20rpx 40rpx;
		gap: 18rpx;
		box-sizing: border-box;
	}

	.system-left-top,
	.system-left-bottom,
	.system-right {
		border-radius: 12px;
		font-size: 25rpx;
	}

	.system-left-top {
		
	}

	.system-left-bottom {
		
	}

	.system-left {
		height: 100%;
		width: 45%;
		display: flex;
		flex-direction: column;
		gap: $gap;
	}

	.system-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 25rpx;
	}

	.system-right-header {
		font-size: 25rpx;
		height: 60rpx;
		margin-bottom: 10rpx;
	}
</style>